<template>
  <van-pull-refresh v-model="isLoading_pull" success-text="刷新成功" @refresh="onPullRefresh">
    <div class="home">
      <!-- 头部 strat -->
      <van-sticky>
        <div class="header">
          <!-- 搜索 -->
          <div class="search">
            <span @click="show_action_area = true">{{ select_area.name }}</span>
            <span @click="onToSearch">搜索职位/公司</span>
          </div>
        </div>
      </van-sticky>
      <!-- 头部 end -->

      <!-- 地区选择弹框 -->
      <van-action-sheet v-model="show_action_area" :actions="action_area_data" cancel-text="取消" description="请选择地区" close-on-click-action @select="onAreaSelect" />

      <!-- 广告 start -->
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in list_banner" :key="index" @click="onBannerItemClick(item)">
            <van-image :src="item.urlImg" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 广告 end -->

      <!-- 菜单 start -->
      <ul class="menu">
        <li class="item" @click="onMenuFamousCompany()">
          <img class="bg06" src="@/assets/img/home/menu-ico06.png" />
          <span>名企专区</span>
        </li>
        <li class="item" @click="onMenuNews(34)">
          <img class="bg02" src="@/assets/img/home/menu-ico02.png" />
          <span>即时招聘</span>
        </li>
        <li class="item" @click="onMenuOne()">
          <img class="bg03" src="@/assets/img/home/menu-ico03.png" />
          <span>一句话招聘</span>
        </li>
        <li class="item" @click="onMenuZs()">
          <img class="bg04" src="@/assets/img/home/menu-ico04.png" />
          <span>求职助手</span>
        </li>
        <li class="item" @click="onMenuQzq()">
          <img class="bg05" src="@/assets/img/home/menu-ico05.png" />
          <span>求职群</span>
        </li>
      </ul>
      <!-- 菜单 end -->

      <!-- 列表 start -->
      <van-tabs v-model="jobTypeActive" swipeable animated sticky offset-top="60px">
        <!-- <template #nav-right>
          <div class="subscribe">
            <van-icon name="edit" color="#888" />
            <span @click="onSubscribeClick">订阅</span>
          </div>
        </template> -->
        <!-- <van-tab title="订阅">
          <div class="subscribe-hint" @click="onSubscribeClick" v-if="isLogin === false || jobSubscribeList.length === 0">
            <b>你想找什么工作？</b>
            <span>订阅职位，获取专属职位匹配</span>
            <a>去订阅</a>
          </div>
          <template v-else>
            <van-list class="job-list" v-model="isLoading_subscribeJobs" :finished="true">
              <JobShowItem v-for="(item, index) in jobSubscribeList" :key="index" :item="item" />
            </van-list>
            <div class="notfound-hint" @click="jobTypeActive = 1">
              <b>找不到心仪的岗位？</b>
              <span>前往查看更多招聘岗位</span>
              <a>去查看</a>
            </div>
          </template>
        </van-tab> -->
        <van-tab title="热门" v-if="isLogin">
          <div class="subscribe-hint" v-if="commendJobList.length == 0 && isLoading_commendJobs == false">
            <a @click="onToResumeAll">去完善简历</a>
          </div>
          <template v-else>
            <van-list class="job-list" v-model="isLoading_commendJobs" @load="onLoadCommendJobList" :finished="isFinish_commendJobs" finished-text="没有更多了">
              <!-- <JobShowItem v-for="(item, index) in commendJobList" :key="index" :item="item" /> -->
              <div @click="onJobClick(item.StationID_Main)" class="job-item" v-for="(item, index) in commendJobList" :key="index" :item="item" >
                <p class="bar01">
                  <span>{{ item.StationName }}</span>
                  <span>{{ item.SalaryFormat}}</span>
                </p>
                <p class="bar02">
                  <span>{{ item.Area }} |
                    {{ item.Edu }} | {{ item.Workyears }}</span>
                  <!-- <span v-if="item.isJiZhao == true">急招</span> -->
                </p>
                <p class="bar03" v-if="item.welfaresTxtArr != null">
                  <span v-for="item_wel in item.welfaresTxtArr.slice(0, 5)" :key="item_wel">{{item_wel}}</span>
                  <span v-if="item.welfaresTxtArr.length >= 6">...</span>
                </p>
                <p class="bar04 vip" @click.stop="onCompanyClick(item.StationID_Main.substr(0,6))">
                  <span>{{ item.CompanyName }}</span>
                  <img :src="item.CompanyLogoUrl" />
                </p>
              </div>
            </van-list>
            <div class="notfound-hint" v-if="
                commendJobList.length <= 20 && isLoading_commendJobs == false
              ">
              <b>找不到心仪的岗位？</b>
              <span>前往查看更多招聘岗位</span>
              <a @click="onToJobResult">去查看</a>
            </div>
          </template>
        </van-tab>
        <van-tab title="最新">
          <van-list class="job-list" v-model="isLoading_newJobs" offset="100" @load="onLoadNewJobList" :finished="isFinish_newJobs" finished-text="没有更多了">
            <JobShowItem v-for="(item, index) in jobNewList" :key="index" :item="item" />
          </van-list>
        </van-tab>
      </van-tabs>
      <!-- 列表 end -->

      <!-- 未登录提醒 start -->
      <div class="login-hint" @click="onSubscribeClick" v-if="isLogin == false">
        <span>为了更好的为您匹配岗位</span>
        <span>请登录</span>
      </div>
      <!-- 未登录提醒 end -->
    </div>
  </van-pull-refresh>
</template>

<script>
import {
  Col,
  Row,
  Button,
  Swipe,
  SwipeItem,
  Search,
  Tab,
  Tabs,
  List,
  Cell,
  CellGroup,
  Sticky,
  Tag,
  Icon,
  Image as VanImage,
  ActionSheet,
  PullRefresh,
  Toast,
} from "vant";
import { PersonLoginedGetSubscribeJobList } from "@/util/http";
import JobShowItem from "@/components/person/JobShowItem.vue";
import {
  checkPersonLogin,
  addPersonArea,
  getPersonArea,
  hasResume,
} from "@/util/session";
import Global from "@/Global";
import { mixin_person_toJobCompany } from "@/mixin/mixins";
export default {
  name: "IndexPage",
	mixins: [mixin_person_toJobCompany],
  components: {
    JobShowItem,
    [Col.name]: Col,
    [Row.name]: Row,
    [Button.name]: Button,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Sticky.name]: Sticky,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [ActionSheet.name]: ActionSheet,
    [PullRefresh.name]: PullRefresh,
  },
  // 定义属性
  data() {
    return {
      isLoading_pull: false, //下拉刷新

      isLogin: checkPersonLogin(),
      jobTypeActive: checkPersonLogin() ? 0 : 1,

      jobNewList: [],
      page_newJobs: 0,
      isLoading_newJobs: false,
      isFinish_newJobs: false,

      jobSubscribeList: [],
      isLoading_subscribeJobs: false,

      commendJobList: [],
      page_tjJobs: 0,
      isLoading_commendJobs: false,
      isFinish_commendJobs: false,

      show_action_area: false,
      select_area:
        getPersonArea() == null ? { id: "", name: "全舟山" } : getPersonArea(),

      list_banner: [],
    };
  },
  computed: {
    action_area_data() {
      let array = [];
      this.$bd.area.forEach((item) => {
        array.push({
          name: item.codeValue,
          id: item.code,
        });
      });
      return array;
    },
  },
  mounted() {
    //初始化
    this.init();
    //监听登录
    this.$bus.$on(Global.bus_person_login, (loginResult) => {
      if (loginResult) {
        this.isLogin = true;
        this.onLoadJobList();
      }
    });
    //简历求职意向更新
    this.$bus.$on(Global.bus_person_resume_jwupdate, () => {
      this.onLoadJobList(null, true);
    });
    //获取订阅职位列表
    // this.onLoadSubscribeJobList();
    //订阅职位
    // this.$bus.$on(Global.bus_person_jobSubscribe, (res) => {
    // 	if (res === "ok") {
    // 		this.onLoadSubscribeJobList();
    // 	}
    // });
  },
  // 方法集合
  methods: {
    init() {
      let areaCode = this.action_area_data.find((it) => it.id == "");
      if (!areaCode)
        this.action_area_data.splice(0, 0, { id: "", name: "全舟山" });
      //获取banner
      this.$api.get("/Wap/GetCompanyAdvList").then((res) => {
        this.list_banner = res.response;
      });
      //jobs
      this.page_tjJobs = 0;
      this.page_newJobs = 0;
      this.isFinish_commendJobs = false;
      this.isFinish_newJobs = false;
      this.jobNewList = [];
      this.commendJobList = [];
      this.onLoadJobList();
    },
    //求职助手
    onMenuZs() {
      this.$router.push({ name: "person-assistant" });
    },
    //一句话
    onMenuOne() {
      this.$router.push({ name: "person-esay" });
    },
    //求职群
    onMenuQzq() {
      this.$router.push({ name: "person-qzq" });
    },
    //下拉刷新
    onPullRefresh() {
      this.isLoading_pull = false;
      this.init();
    },
    //顶部搜索
    onToSearch() {
      this.$router.push({ name: "person-search-index" });
    },
    //顶部菜单8大按钮 现场招聘会
    onMenuXCZPH() {
      this.$router.push({ name: "person-xczph" });
    },
    onMenuBaGua() {
      this.$router.push({ name: "person-bagua" });
    },
    //顶部菜单8大按钮 即时招聘、通知公告
    onMenuNews(typeid) {
      this.$router.push({ name: "person-news-list", query: { typeid } });
    },
    //顶部菜单8大按钮 名企专区
    onMenuFamousCompany() {
      this.$router.push({ name: "person-famous-company" });
    },
    //顶部菜单8大按钮 直播间
    onMenuZBJ() {
      this.$router.push({ name: "person-zbj" });
    },
    //顶部菜单8大按钮 兼职
    onMenuJianZhi() {
      this.$router.push({
        name: "person-search-result",
        params: { jianzhi: 1 },
      });
    },
    //顶部菜单8大按钮 急招
    onMenuJiZhao() {
      this.$router.push({
        name: "person-search-result",
        params: { jizhao: 1 },
      });
    },
    //推荐职位列表（求职意向）
    onLoadCommendJobList() {
      this.isLoading_commendJobs = true;
      this.page_tjJobs++;
      this.$api
        .get("/PersonStation/GetCommendStationPageList?areaCode=" + this.select_area.id, {
          pageIndex: this.page_tjJobs,
          pageSize: 20,
        })
        .then((res) => {
          this.isLoading_commendJobs = false;
          if (res.success) {
            var resultList = res.response;
            //no data
            if (this.page_tjJobs == 1 && resultList.length == 0) {
              this.isFinish_commendJobs = true;
            } else {
              //no more data
              if (this.page_tjJobs != 0 && resultList.length == 0) {
                this.isFinish_commendJobs = true;
              }
              this.commendJobList = [...this.commendJobList, ...resultList];
            }
          }
        });
    },
    //最新职位列表加载
    onLoadNewJobList() {
      this.isLoading_newJobs = true;
      this.page_newJobs++;
      this.$api
        .get("/PersonStation/GetStationPageList", {
          pageIndex: this.page_newJobs,
          pageSize: 20,
          keyword: "",
          areaCode: this.select_area.id,
        })
        .then((res) => {
          this.isLoading_newJobs = false;
          if (res.success) {
            var resultList = res.response;
            //no data
            if (this.page_newJobs == 1 && resultList.length == 0) {
              this.isFinish_newJobs = true;
            } else {
              //no more data
              if (this.page_newJobs != 0 && resultList.length == 0) {
                this.isFinish_newJobs = true;
              }
              this.jobNewList = [...this.jobNewList, ...resultList];
            }
          }
        });
    },
    //加载职位
    onLoadJobList(activeIndex, isReload) {
      //重载
      if (isReload) {
        this.page_newJobs = 0;
        this.page_tjJobs = 0;
        this.jobNewList = [];
        this.commendJobList = [];
      }
      //手动加载
      if (activeIndex) {
        this.jobTypeActive = activeIndex;
        if (this.jobTypeActive == 0) {
          this.onLoadCommendJobList();
        } else if (this.jobTypeActive == 1) {
          this.onLoadNewJobList();
        }
      } else {
        //默认加载
        if (this.isLogin) {
          this.onLoadCommendJobList();
        }
        this.onLoadNewJobList();
      }
    },
    //订阅职位列表
    onLoadSubscribeJobList() {
      if (checkPersonLogin() === false) return;
      this.isLoading_subscribeJobs = true;
      PersonLoginedGetSubscribeJobList().then((res) => {
        this.isLoading_subscribeJobs = false;
        this.jobSubscribeList = res.response;
      });
    },
    //订阅
    onSubscribeClick() {
      this.$router.push({ name: "person-jobSubscribe" });
    },
    //地区选择
    onAreaSelect(action, index) {
      let item = this.action_area_data[index];
      this.select_area = item;
      addPersonArea(item);
      this.onLoadJobList(null, true);
    },
    //banner点击
    onBannerItemClick(item) {
      return;
      if (item.type == "1") {
        this.$router.push({
          name: "person-companyinfo",
          query: { companyid: item.companyID },
        });
      } else if (item.type == "2") {
        //外链跳转
      }
    },
    //jump to the page:job list
    onToJobResult() {
      this.$router.push({ name: "person-search-result" });
    },
    onToResumeAll() {
      if (hasResume()) {
        this.$router.push({ name: "person-resume-all" });
      } else {
        this.$router.push({ name: "person-resume-resumequick1" });
      }
    },
  },
};
</script>

<style scoped>
@import "./IndexPage.css";

.job-item {
	display: flex;
	flex-direction: column;
	padding: 18px 20px 0;
	background-color: #fff;
}

.job-item+.job-item {
	margin-top: 10px;
}

.job-item p {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	margin-bottom: 10px;
	overflow: hidden;
}

.job-item p.bar01 {
	font-size: 18px;
}

.job-item p.bar01 span:nth-child(1) {
	max-width: 200px;
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.job-item p.bar01 span:nth-child(2) {
	color: #f44;
}

.job-item p.bar02 span:nth-child(1) {
	font-size: 13px;
	color: #666;
}

.job-item p.bar02 span:nth-child(2) {
	padding: 0 4px;
	border-radius: 3px;
	background-color: #f66;
	font-size: 11px;
	color: #fff;
}

.job-item p.bar03 {
	justify-content: flex-start;
	padding-bottom: 6px;
}

.job-item p.bar03 span {
	padding: 2px 5px;
	border-radius: 3px;
	margin-right: 6px;
	background-color: rgba(0, 0, 0, 0.04);
	font-size: 12px;
	color: #999;
}

.job-item p.bar04 {
	position: relative;
	padding: 15px 0 15px 28px;
	border-top: 1px solid #f7f7f7;
	margin-bottom: 0;
}

/* .job-item p.bar04.vip:after {
	content: "";
	position: absolute;
	bottom: 9px;
	left: 12px;
	z-index: 10;
	width: 12px;
	height: 12px;
	background: url("@/assets/img/home/vip-ico.png") no-repeat center / 12px;
} */

.job-item p.bar04 img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin-top: -10px;
}

.job-item p.bar04 span:nth-child(1) {
	max-width: 200px;
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.job-item p.bar04 span:nth-child(2) {
	font-size: 12px;
	color: #999;
}
</style>
